<template>
  <shuzi3></shuzi3>
  <div class="map-container" ref="mapRef"></div>
</template>

<script>
import { onMounted, onUnmounted, ref } from 'vue';
import * as echarts from 'echarts';
// 假设hunan.json已通过import导入或在全局可用
import hunanJson from './hunan.json'; // 根据实际文件路径调整
import shuzi3 from './shuzi3.vue';

export default {
  name: 'HunanMap',
  components: {
    shuzi3 // 注册组件
  },
  setup() {
    const mapRef = ref(null);
    let chart = null;

    // 初始化地图
    const initMap = () => {
      // 注册湖南省地图数据
      echarts.registerMap('湖南', hunanJson);

      // 获取DOM元素并初始化图表
      if (mapRef.value) {
        // 销毁之前的实例（如果存在）
        if (chart) {
          chart.dispose();
        }
        
        chart = echarts.init(mapRef.value);

        // 标记点数据（湖南省主要城市坐标）
        const markPoints = [
          { name: '长沙市', coord: [112.982279, 28.19409] },
          { name: '株洲市', coord: [113.151737, 27.835806] },
          { name: '湘潭市', coord: [112.944052, 27.82973] },
          // 可以添加更多城市...
        ];

        // 提取城市数据用于地图渲染
        const cityData = hunanJson.features.map(feature => ({
          name: feature.properties.name,
          value: Math.floor(Math.random() * 100) // 随机值作为示例
        }));

        // 地图配置项
        const option = {
          backgroundColor: '#0f2035',
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              if (params.seriesType === 'map') {
                return `${params.name}<br/>值: ${params.value}`;
              } else if (params.seriesType === 'effectScatter') {
                return params.name;
              }
              return params.name;
            }
          },
          series: [
            {
              type: 'map',
              map: '湖南', // 使用注册的地图名称
              label: {
                show: true,
                color: '#ffffff', // 城市名称文字颜色
                fontSize: 10
              },
              itemStyle: {
                areaColor: '#409eff', // 地图区域底色
                borderColor: '#38bdf8', // 区域边框颜色
                borderWidth: 1
              },
              emphasis: {
                // 鼠标悬停时的样式
                label: {
                  show: true,
                  color: '#ffffff'
                },
                itemStyle: {
                  areaColor: '#38bdf8'
                }
              },
              data: cityData
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: markPoints,
              symbolSize: 10,
              itemStyle: {
                color: '#ff6b6b'
              },
              label: {
                show: true,
                position: 'right',
                color: '#ffffff',
                fontSize: 12
              },
              rippleEffect: {
                scale: 5,
                brushType: 'stroke'
              }
            }
          ]
        };

        // 设置配置项并渲染
        chart.setOption(option);
      }
    };

    // 窗口大小变化时重绘
    const handleResize = () => {
      if (chart) {
        chart.resize();
      }
    };

    // 生命周期钩子
    onMounted(() => {
      // 确保DOM渲染完成后再初始化
      setTimeout(() => {
        initMap();
      }, 100);
      
      window.addEventListener('resize', handleResize);
    });

    onUnmounted(() => {
      // 清理事件监听器和图表实例
      window.removeEventListener('resize', handleResize);
      if (chart) {
        chart.dispose();
      }
    });

    return {
      mapRef
    };
  }
};
</script>

<style scoped>
.map-container {
  width: 700px;
  height: 500px;
  /* background-color: #0f2035; */
  border-radius: 8px;
  overflow: hidden;
  transform: translateY(-10px);
}
</style>